import { useState } from 'react'

function Contact() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  })

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    })
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    alert('感谢您的留言！我们会尽快回复您。')
    setFormData({ name: '', email: '', message: '' })
  }

  return (
    <div className="page">
      <h1>联系我们</h1>
      <p>如果您有任何问题或建议，请随时联系我们。</p>
      
      <form onSubmit={handleSubmit} className="contact-form">
        <div className="form-group">
          <label htmlFor="name">姓名</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
          />
        </div>
        
        <div className="form-group">
          <label htmlFor="email">邮箱</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
          />
        </div>
        
        <div className="form-group">
          <label htmlFor="message">留言</label>
          <textarea
            id="message"
            name="message"
            value={formData.message}
            onChange={handleChange}
            rows={5}
            required
          />
        </div>
        
        <button type="submit" className="submit-button">发送留言</button>
      </form>
      
      <div className="contact-info">
        <h2>联系方式</h2>
        <p>邮箱: demo@vite-progress.com</p>
        <p>电话: +86 123 4567 8900</p>
        <p>地址: 北京市朝阳区科技园</p>
      </div>
    </div>
  )
}

export default Contact